const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CustomWebpackPlugin = require("./custom-webpack-plugin");

module.exports = {
  // 这个属性有三种取值，分别是 production、development 和 none。
  // 1. 生产模式下，Webpack 会自动优化打包结果；
  // 2. 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
  // 3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
    // 自定义资源输出文件名 [ext]是扩展名
    assetModuleFilename: "images/[name].[hash:6][ext]",
  },
  devtool: "source-map",
  devServer: {
    contentBase: "./dist",
    proxy: {
      "/api": {
        // http://localhost:9000/api/users -> https://api.github.com/api/users
        target: "https://api.github.com",
        pathRewrite: {
          "^/api": "",
        },
        // 不能使用 localhost:9000 作为请求 GitHub 的主机名
        changeOrigin: true,
      },
    },
    hot: true,
    // hotOnly: true // 只使用 HMR，不会 fallback 到 live reloading
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /.js$/,
        // 排除 node_modules 不然 html-webpack-plug 插件执行 node_modules 中的代码会报错
        // 这里需要使用绝对路径，不然也会报错
        exclude: path.join(__dirname, "node_modules"),
        use: {
          loader: "babel-loader",
          options: {
            // @babel/preset-env 中包含了最新的语法，可以将新的语法自动转换成 ES2015
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /.css$/,
        // 这里用 css-loader 解析后需要用 style-loader 进行解析创建一个 style 标签挂在到 document 上
        use: ["style-loader", "css-loader"],
      },
      {
        // webpack 5 通过 asset 来加载资源
        // asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
        // asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
        // asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
        // asset 在导出一个 data URI 和发送一个单独的文件之间自动选择
        test: /\.(png|jpe?g|gif)$/,
        type: "asset/resource",
      },
      {
        test: /.html$/,
        use: {
          loader: "html-loader",
          options: {
            sources: {
              list: [
                // 指定 html 资源中 a 标签 href 资源的加载方式
                // 需要为配置中的图片指定 loader（推荐使用 asset modules）
                {
                  tag: "a",
                  attribute: "href",
                  type: "src",
                },
              ],
            },
          },
        },
      },
      // 自定义一个 markdown-loader
      {
        test: /.md$/,
        use: ["html-loader", "./custom-loader.js"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ title: "Hello Webpack" }),
    new CustomWebpackPlugin(),
    // 开发阶段最好不要使用这个插件,直接定位资源即可,避免频繁拷贝消耗内存
    new CopyWebpackPlugin({
      patterns: [{ from: "public/*.ico" }],
    }),
  ],
};
